﻿<div class="ui-widget-content">
    <h3>Tabs - Ajax</h3>
    <p>
       Você pode carregar o conteúdo das tabs dinamicamente via ajax!
    </p>

    <div id="meu_tab3">
        <ul>
            <li><a href="slides/tabs_ajax_1.html">tab 1</a></li>
            <li><a href="slides/tabs_ajax_2.html">tab 2</a></li>
            <li><a href="nao_existe_vai_dar_erro">tab 3</a></li>
        </ul>
    </div>

    <p>
        Veja como é simples:

        <pre>$('#meu_tab').tabs({
    ajaxOptions: {
        error: function(xhr, status, index, anchor) {
          $(anchor.hash).html("Não foi possivel carregar o conteúdo! :(");
        }
    }
});</pre>
    </p>

    <p>
        HTML:

        <pre>&lt;div id=&quot;meu_tab&quot;&gt;
    &lt;ul&gt;
        &lt;li&gt;&lt;a href=&quot;slides/tabs_ajax_1.html&quot;&gt;tab 1&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;slides/tabs_ajax_2.html&quot;&gt;tab 2&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;nao_existe_vai_dar_erro&quot;&gt;tab 3&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;</pre>
    </p>
    <script type="text/javascript">
        inicializador.tabsAjaxInit = function() {
            $('#meu_tab3').tabs({
                ajaxOptions: {
                    error: function(xhr, status, index, anchor) {
                        $(anchor.hash).html("Não foi possível carregar o conteúdo! :(");
                    }
                }
            });
        };
    </script>
</div>
